<template>
  <div class="pay">
    <template>
      <h1 style="text-align: left; margin-bottom: 10px">确认订单</h1>
      <el-table :data="product">
        <el-table-column
          prop="date"
          label="充值产品"
          align="center"
          style="width: 100%"
        >
          <template v-slot="{ row }">
            <img
              :src="row.imageUrl"
              style="vertical-align: middle"
              width="60px"
            />
            <span style="color: #f4c14f; font-weight: bolder">
              {{ row.productName }}
            </span>
            <br />
            <span>{{ row.description }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="price"
          label="单价"
          align="center"
        ></el-table-column>
        <el-table-column prop="address" label="数量" align="center">
          <!-- 坑 -->
          <!-- 这边一定要有v-slot 不然不可以点击加减 -->
          <template v-slot="{ row }">
            <el-input-number
              v-model="quantity"
              size="mini"
              :min="1"
              :max="10000"
              label="描述文字"
            ></el-input-number>
            <i v-if="false">{{ row }}</i>
          </template>
        </el-table-column>
        <el-table-column prop="address" label="小计" align="center">
          <template>
            <span>
              {{ total_fee }}
            </span>
          </template>
        </el-table-column>
      </el-table>
    </template>
    <div class="bottomBox">
      <div class="priceBox">
        <p class="price">
          <span>实付款:</span>
          <span>¥</span>
          <span>{{ total_fee }}</span>
        </p>
        <p class="content">
          <span>充值详情:</span>
          <span>
            尊贵vip3充值-vip包月服务,心悦vip3,尊贵体验,强行踢人下线,你值得拥有
          </span>
        </p>
        <p class="account">
          <span>充值帐户:</span>
          <span>{{ useInfo.username }}</span>
        </p>
      </div>
    </div>
    <div class="btnBox">
      <el-button class="btn" @click="commitOrder()">确认订单</el-button>
    </div>
  </div>
</template>

<script>
import * as api from "@/api/transaction";
import { mapState } from "vuex";
export default {
  data() {
    return {
      product_id: "",
      product: [],
      quantity: 1, //数量
    };
  },
  created() {
    //获取query参数
    let { product_id } = this.$route.query;
    this.product_id = product_id;
    api.getProductInfo(product_id).then((res) => {
      console.log(res.data, 1);
      this.product = res.data.data;
    });
  },
  computed: {
    total_fee() {
      //？可链选 undefined不会报错
      return (this.quantity * this.product[0]?.price).toFixed(2);
    },
    ...mapState("users", ["useInfo"]),
  },
  methods: {
    //提交订单
    commitOrder() {
      this.$confirm(
        `您是否购买${this.product[0].productName} , 商品总价${this.total_fee}是否购买?`,
        "确认订单",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          //调用下单接口
          api.preOrder(this.product_id, this.quantity).then((res) => {
            console.log(res, 666);
            if (res.data.state) {
              //下单成功，获取order_id
              let { order_id } = res.data;
              // 跳转到支付页面,携带订单号
              this.$router.push({
                name: "home-payment-pay",
                query: { order_id },
              });
            }
          });
        })
        .catch(() => {
          this.$message.error("已取消订单");
        });
    },
  },
};
</script>
<style lang="less" scoped>
.pay {
  margin: 0 80px 0 80px;
}
.bottomBox {
  width: 100%;
  overflow: hidden;
  margin-top: 50px;
  .priceBox {
    float: right;
    width: 600px;
    padding: 10px 10px;
    text-align: right;
    border: 1px solid #ff0036;
    span {
      font-weight: bold;
      margin-right: 5px;
    }
    .price span:nth-of-type(2) {
      font-size: 24px;
      color: grey;
    }
    .price span:nth-of-type(3) {
      font-size: 24px;
      color: rgb(255, 80, 0);
    }
  }
  .content span:nth-of-type(2) {
    color: #daa520;
  }
  .account span:nth-of-type(2) {
    color: #ff0036;
    font-size: 24px;
  }
  p {
    margin-bottom: 10px;
  }
}
.btnBox {
  width: 100%;
  .btn {
    float: right;
    width: 200px;
    height: 40px !important;
    border: 1px solid #f56c6c;
    background: #f56c6c;
    color: white;
    border-radius: 0;
  }
}
</style>
